.mhy-qrcode {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.mhy-qrcode.mhy-qrcode-float {
  display: block
}

.mhy-qrcode.mhy-qrcode-float .mhy-qrcode__code {
  width: 150px;
  height: 150px
}

.mhy-qrcode.mhy-qrcode-float .mhy-qrcode__icon {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px
}

.mhy-qrcode.mhy-qrcode-float .mhy-qrcode__text {
  margin-top: 20px
}

.mhy-qrcode.mhy-qrcode-float .mhy-qrcode__title {
  font-weight: 600
}

.mhy-qrcode.mhy-qrcode-vertical {
  display: block;
  width: 160px
}

.mhy-qrcode.mhy-qrcode-vertical .mhy-qrcode__code {
  margin: 0 auto
}

.mhy-qrcode.mhy-qrcode-vertical .mhy-qrcode__text {
  text-align: center;
  margin-top: 20px
}

.mhy-qrcode.mhy-qrcode-code {
  display: block
}

.mhy-qrcode.mhy-qrcode-code .mhy-qrcode__code {
  width: 200px;
  height: 200px;
  margin-right: 0
}

.mhy-qrcode.mhy-qrcode-code .mhy-qrcode__text {
  display: none
}

.mhy-qrcode__code {
  width: 100px;
  height: 100px;
  margin-right: 8px;
  position: relative;
  background-color: #f5f5f5;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

.mhy-qrcode__img {
  height: 100%
}

.mhy-qrcode__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url() 50% no-repeat;
  background-size: cover;
  margin-left: -8px;
  margin-top: -8px
}

.mhy-qrcode__text {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  white-space: nowrap
}

.mhy-qrcode__title {
  font-size: 16px;
  color: #4cc3ff
}

.mhy-qrcode__subtitle {
  font-size: 16px;
  margin-top: 8px;
  color: #999
}